import QtQuick 2.15
import QtQuick.Controls 2.15
import "qrc:/qml/styles" as Styles

Rectangle {
    id: searchBar

    // 自定义属性
    property string placeholderText: qsTr("搜索...")
    property string searchText: ""
    property bool clearButtonVisible: true
    property string iconSource: "🔍"  // 搜索图标

    // 默认尺寸
    width: 250
    height: Styles.Theme.buttonHeightNormal

    // 样式
    color: Styles.Theme.surface
    border.color: textInput.focus ? Styles.Theme.primary : Styles.Theme.border
    border.width: 1
    radius: Styles.Theme.radiusNormal

    // 信号
    signal textSearched(string text)
    signal searchSubmitted(string text)
    signal cleared()

    // 搜索图标
    Text {
        id: searchIcon
        text: iconSource
        color: Styles.Theme.textSecondary
        font.pixelSize: 16
        anchors {
            left: parent.left
            leftMargin: Styles.Theme.spacingSmall
            verticalCenter: parent.verticalCenter
        }
    }

    // 输入框容器
    Item {
        id: inputContainer
        anchors {
            left: searchIcon.right
            leftMargin: Styles.Theme.spacingSmall
            right: parent.right
            rightMargin: Styles.Theme.spacingSmall
            top: parent.top
            bottom: parent.bottom
        }

        // 输入框
        TextInput {
            id: textInput
            anchors {
                left: parent.left
                right: clearButton.visible ? clearButton.left : parent.right
                rightMargin: clearButton.visible ? Styles.Theme.spacingSmall : 0
                verticalCenter: parent.verticalCenter
            }

            text: searchText
            color: Styles.Theme.textPrimary
            selectionColor: Styles.Theme.primary
            selectedTextColor: Styles.Theme.textOnPrimary
            font.pixelSize: Styles.Theme.fontSizeNormal
            verticalAlignment: TextInput.AlignVCenter

            // 占位符文本
            Text {
                visible: !textInput.text && !textInput.focus
                text: placeholderText
                color: Styles.Theme.textTertiary
                font.pixelSize: parent.font.pixelSize
                anchors.verticalCenter: parent.verticalCenter
            }

            onTextChanged: {
                searchBar.searchText = text
                searchBar.textSearched(text)
            }

            onAccepted: {
                searchBar.searchSubmitted(text)
            }
        }

        // 清除按钮
        Rectangle {
            id: clearButton
            visible: clearButtonVisible && searchText.length > 0
            width: 20
            height: 20
            anchors {
                right: parent.right
                verticalCenter: parent.verticalCenter
            }
            radius: 10
            color: clearMouseArea.containsMouse ? Styles.Theme.surfaceVariant : "transparent"

            Text {
                text: "✕"
                color: Styles.Theme.textSecondary
                font.pixelSize: 12
                anchors.centerIn: parent
            }

            MouseArea {
                id: clearMouseArea
                anchors.fill: parent
                hoverEnabled: true
                cursorShape: Qt.PointingHandCursor
                onClicked: {
                    textInput.text = ""
                    searchBar.cleared()
                    textInput.forceActiveFocus()
                }
            }
        }
    }

    // 点击背景区域激活焦点
    MouseArea {
        anchors.fill: parent
        onClicked: textInput.forceActiveFocus()
        z: -1  // 置于最底层，不阻挡其他元素
    }

    // 边框颜色动画
    Behavior on border.color {
        ColorAnimation { duration: Styles.Theme.animationFast }
    }

    // 公共方法
    function clear() {
        textInput.text = ""
        cleared()
    }

    function focusInput() {
        textInput.forceActiveFocus()
    }
}